<template>
	<view class="pageBg">
		<banner :banner="banner"></banner>
		<navList></navList>
		<laziness></laziness>
		<view class="exhibition">
			<view class="header spaceBetween">
				<view class="title">推荐产品</view>
				<view class="mode flex" @click="product">
					<view class="">更多</view>
					<image class="navto" src="/static/images/navto.svg" mode=""></image>
				</view>
			</view>
			<goodsList :list="data.goodsList"></goodsList>
		</view>
		<view class="exhibition">
			<view class="header spaceBetween">
				<view class="title">热门活动</view>
				<view class="mode flex" @click="activity">
					<view class="">更多</view>
					<image class="navto" src="/static/images/navto.svg" mode=""></image>
				</view>
			</view>
			<activity :list="data.articlelist"></activity>
		</view>
	</view>
</template>

<script>
	import navList from '@/components/index/navList/navList.vue';
	import activity from '@/components/activity/activity.vue';
	import goodsList from '@/components/product/goodsList/goodsList.vue';
	import banner from '@/components/index/banner/banner.vue';
	import laziness from '@/components/index/laziness/laziness.vue';

	export default {
		components: { navList, goodsList, banner, laziness, activity },
		data() {
			return {
				banner: [],
				data: {},
			};
		},
		onShow() {
			this.init();
		},
		methods: {
			async init() {
				const bannerRes = await this.$api.Adlists({ pid: 1 });
				this.banner = bannerRes.data;
				const { data } = await this.$api.index();
				this.data = data;
			},
			product() {
				uni.switchTab({
					url: '/pages/product/product',
				});
			},
			activity() {
				uni.switchTab({
					url: '/pages/activity/activity',
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.pageBg {
		.previousEventsList {
			overflow: hidden;
			overflow-x: scroll;
			width: $connet-width;
			margin: 0 auto;
			min-height: 40rpx;
			white-space: nowrap;
			.item {
				display: inline-block;
				margin-right: $submargin-width;
				background: $price-color;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				font-size: $uni-font-size-10;
				line-height: 40rpx;
				color: #ffffff;
				padding: 0 20rpx;
			}
		}
		.exhibition {
			overflow: hidden;
			.header {
				margin: $margin-width auto 0;
				overflow: hidden;
				width: $connet-width;

				.title {
					font-weight: bold;
					color: #000000;
					font-size: $uni-font-size-14;
				}

				.mode {
					font-weight: 400;
					color: $price-color;
					font-size: $uni-font-size-10;
					align-items: center;
					.navto {
						width: 30rpx;
						height: 25rpx;
					}
				}
			}
		}
	}
</style>
